<template>
  <div class="filter-input">
    <el-input
      v-model="query.blurry"
      size="small"
      placeholder="输入名称或者邮箱搜索"
      style="width: 200px;"
      class="filter-item"
    />
    <el-select
      v-model="query.enabled"
      size="small"
      placeholder="状态"
      class="filter-item"
    >
      <el-option
        v-for="item in enabledTypeOptions"
        :key="item.key"
        :label="item.display_name"
        :value="item.key"
      />
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="$emit('search')">查 询</el-button>
    <el-button type="warning" icon="el-icon-refresh" @click="handleReset">重 置</el-button>
    <el-button type="success" icon="el-icon-plus" @click="add">新 增</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="handleDelet">删 除</el-button>
    <DoUser :show-user.sync="showUser" :title="'新增用户'" />
  </div>
</template>
<script>
import DoUser from './Douser'
export default {
  components: {
    DoUser
  },
  data() {
    return {
      showUser: false,
      orderTime: [],
      payTime: [],
      dealTime: [],
      enabledTypeOptions: [
        { key: 'true', display_name: '激活' },
        { key: 'false', display_name: '锁定' }
      ],
      query: {
        blurry: '',
        enabled: ''
      }
    }
  },
  methods: {
    add() {
      this.showUser = true
    },
    handleDelet() {

    },
    handleReset() {
      const { query } = this
      const key = Object.keys(query)
      key.map(el => {
        this.query[el] = ''
      })
      this.$emit('search')
    }
  }
}
</script>
<style scoped lang="scss">
.filter-input{
    margin-bottom: 20px;
}
</style>
